// 主题

@use "sass:map";
@use "variables" as variables;

$themes: (
  // 浅色主题
  light:
    (
      // 主要文本颜色
      text-color: variables.$base-text-color-light,
      text-color-translucent: variables.$base-text-color-light-translucent,
      text-color-opaque: variables.$base-text-color-light-opaque,
      text-color-hover: variables.$base-text-color-light-hover,
      text-color-active: variables.$base-text-color-light-active,
      // 次要文本颜色
      text-color-secondary: variables.$base-text-color-secondary-light,
      text-color-secondary-translucent: variables.$base-text-color-secondary-light-translucent,
      text-color-secondary-opaque: variables.$base-text-color-secondary-light-opaque,
      text-color-secondary-hover: variables.$base-text-color-secondary-light-hover,
      text-color-secondary-active: variables.$base-text-color-secondary-light-active,

      // 按钮颜色
      btn-color: variables.$base-btn-color-light,
      btn-color-translucent: variables.$base-btn-color-light-translucent,
      btn-color-hover: variables.$base-btn-color-light-hover,
      btn-color-active: variables.$base-btn-color-light-active,
      btn-color-disabled: variables.$base-btn-color-light-disabled,

      // 整体背景
      bg-color: variables.$base-bg-color-light,
      bg-color-translucent: variables.$base-bg-color-light-translucent,
      bg-color-opaque: variables.$base-bg-color-light-opaque,
      bg-color-hover: variables.$base-bg-color-light-hover,
      bg-color-active: variables.$base-bg-color-light-active,
      // 模块背景
      module-bg-color: variables.$base-module-bg-color-light,
      module-bg-color-translucent: variables.$base-module-bg-color-light-translucent,
      module-bg-color-opaque: variables.$base-module-bg-color-light-opaque,
      module-bg-color-hover: variables.$base-module-bg-color-light-hover,
      module-bg-color-active: variables.$base-module-bg-color-light-active,

      // 链接颜色
      link-color: variables.$base-link-color-light,
      link-color-hover: variables.$base-link-color-light-hover,
      link-color-active: variables.$base-link-color-light-active,
      link-color-visted: variables.$base-link-color-light-visted
    ),
  // 深色主题
  dark:
    (
      // 主要文本颜色
      text-color: variables.$base-text-color-dark,
      text-color-translucent: variables.$base-text-color-dark-translucent,
      text-color-opaque: variables.$base-text-color-dark-opaque,
      text-color-hover: variables.$base-text-color-dark-hover,
      text-color-active: variables.$base-text-color-dark-active,
      // 次要文本颜色
      text-color-secondary: variables.$base-text-color-secondary-dark,
      text-color-secondary-translucent: variables.$base-text-color-secondary-dark-translucent,
      text-color-secondary-opaque: variables.$base-text-color-secondary-dark-opaque,
      text-color-secondary-hover: variables.$base-text-color-secondary-dark-hover,
      text-color-secondary-active: variables.$base-text-color-secondary-dark-active,

      // 按钮颜色
      btn-color: variables.$base-btn-color-dark,
      btn-color-translucent: variables.$base-btn-color-dark-translucent,
      btn-color-hover: variables.$base-btn-color-dark-hover,
      btn-color-active: variables.$base-btn-color-dark-active,
      btn-color-disabled: variables.$base-btn-color-dark-disabled,

      // 整体背景
      bg-color: variables.$base-bg-color-dark,
      bg-color-translucent: variables.$base-bg-color-dark-translucent,
      bg-color-opaque: variables.$base-bg-color-dark-opaque,
      bg-color-hover: variables.$base-bg-color-dark-hover,
      bg-color-active: variables.$base-bg-color-dark-active,
      // 模块背景
      module-bg-color: variables.$base-module-bg-color-dark,
      module-bg-color-translucent: variables.$base-module-bg-color-dark-translucent,
      module-bg-color-opaque: variables.$base-module-bg-color-dark-opaque,
      module-bg-color-hover: variables.$base-module-bg-color-dark-hover,
      module-bg-color-active: variables.$base-module-bg-color-dark-active,

      // 链接颜色
      link-color: variables.$base-link-color-dark,
      link-color-hover: variables.$base-link-color-dark-hover,
      link-color-active: variables.$base-link-color-dark-active,
      link-color-visted: variables.$base-link-color-dark-visted
    )
);

// 当前主题
$currentTheme: light;
// 使用主题
@mixin useTheme() {
  @each $theme, $map in $themes {
    $currentTheme: $theme !global;
    html[data-theme="#{$theme}"] & {
      @content;
    }
  }
}
// 获取主题变量
@function getVar($key) {
  $themeMap: map.get($themes, $currentTheme);
  @return map.get($themeMap, $key);
}
